import React from 'react';
import {StyleSheet, TextInput, View, TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Input from './Input';
export default class TextArea extends Input {
  renderChildren() {
    const props = this.props;
    const {onChangeText} = props;
    return (
      <View style={styles.container}>
        <TextInput
          numberOfLines={3}
          multiline
          {...props}
          style={styles.input}
        />
        <TouchableOpacity
          onPress={onChangeText.bind(this, null)}
          style={styles.clearContainer}>
          <Icon name="close-circle" size={15} />
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  input: {
    flex: 1,
    minHeight: 80,
  },
  clearContainer: {
    padding: 5,
    alignSelf: 'flex-end',
  },
});
